<!--添加修改角色信息-->
<template>
  <a-modal v-model="showAddTable" :mask-closable="false" :closable="false" :width="500"
           title='课程微调'
           :maskClosable="false"
           :destroyOnClose="true">
    <a-form :form="form" @keydown.native.enter.prevent="saveApply" class="modelSearch">
      <a-form-item label="上课日期：" v-bind="formStyle" required>
        <a-date-picker
            :disabledDate="disabledStartDate"
            format="YYYY-MM-DD"
            v-model="startDate"
            placeholder="上课日期"
            style="width: 250px; float: left"
            v-decorator="['startDate', { rules: [{ required: true, message: '选择上课日期' }] }]"
        />
      </a-form-item>
      <a-form-item label="上课时间：" v-bind="formStyle" required>
        <a-time-picker v-model="attendTime" valueFormat="HH:mm" format="HH:mm"
                       style="width: 120px; "
                       v-decorator="['attendTime', { rules: [{ required: true, message: '选择上课时间' }] }]"
        />
        <span style="width: 10px">-</span>
        <a-time-picker v-model="finishTime" valueFormat="HH:mm" format="HH:mm"
                       style="width: 120px; "
                       v-decorator="['finishTime', { rules: [{ required: true, message: '选择下课时间' }] }]"
        />
      </a-form-item>
    </a-form>
    <div slot="footer">
      <a-button type="default" size="default" @click="cancelApply()">取消</a-button>
      <a-button type="primary" size="default" @click="saveApply()">确定</a-button>
    </div>
  </a-modal>
</template>

<script>
import verify from 'libs/verify'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import moment from "moment";

export default {
  name: 'schedule',
  components: {
    AFormItem,
    verify
  },
  data() {
    return {
      verify,
      form: this.$form.createForm(this),
      showAddTable: false,
      name: '',
      scheduleId: '',
      startDate: '',
      endDate: '',
      attendTime: '',
      finishTime: '',
      weekList: [],
    }
  },
  computed: {
    classSelectList() {
      return this.$store.state.courseManage.classSelectList
    },
    formStyle() {
      return this.$store.state.common.formStyle
    }
  },
  props: {

  },
  watch: {},
  methods: {

    /**
     * Function    : disabledStartDate
     * Description : 对结束时间进行限制
     * Input       : startValue
     * Return      : None
     */
    disabledStartDate ( startValue ) {
      return startValue && startValue < moment().subtract(1, 'days')
    },

    changeAttendTime(time,timeString){
      console.log(time)
      console.log(timeString)
    },
    /**
     * Function    : saveApply
     * Description : 打开弹框
     * Input       : none
     * Return      : none
     */
    showModal(scheduleId,date,attendTime,finishTime) {
      this.scheduleId = scheduleId
      this.startDate = date
      this.attendTime = attendTime
      this.finishTime = finishTime
      this.showAddTable = true
      this.$nextTick (() => {
        this.form.setFieldsValue (this.$pick ({startDate:this.startDate,attendTime:this.attendTime,finishTime:this.finishTime}, [ 'startDate', 'attendTime' , 'finishTime' ]))
      })
    },
    /**
     * Function    : disabledEndDate
     * Description : 对结束时间进行限制
     * Input       : endValue
     * Return      : None
     */
    disabledEndDate ( endValue ) {
      const startDate = this.startDate
      if (startDate) {
        return startDate.valueOf () >= endValue.valueOf ()
      }
      return (
          endValue && endValue < moment().subtract(1, 'days')
      )
    },

    /**
     * Function    : saveApply
     * Description : 角色信息新增、编辑保存
     * Input       : name
     * Return      : none
     */
    saveApply() {
      let _this = this
      this.form.validateFields((err, value) => {
        if (!err) {
          let param = {
            id: _this.scheduleId,
            date: moment(this.startDate).format('YYYY-MM-DD'),
            attendTime:this.attendTime,
            finishTime: this.finishTime
          }
          console.log(param)
          this.$store.dispatch('updateScheduleTimeAct', param).then(response => {
            if (response.code === 0) {
              this.showAddTable = false
              this.$emit("init")
              this.$message.success(response.message)
            } else if (response.code === 100001) {
              let msgArray = JSON.parse(response.message)
              let msg = "";
              for (let index in msgArray) {
                msg = msg + '\n' + msgArray[index]
              }
              alert(msg)
            } else {
              this.$message.error(response.message)
            }
          })
        }
      })
    },

    /**
     * Function    : cancelApply
     * Description : 取消弹出框
     * Input       : val
     * Return      : none
     */
    cancelApply() {
      this.weekList = []
      this.showAddTable = false
      let _this = this
      setTimeout(function () {
        _this.form.resetFields()
      }, 100)
    },
    initData() {
      this.$store.dispatch('getClassSelectListAct', {})
    }

  },

  created() {
    this.initData()
  }
}
</script>

<style>
.ant-table-thead {
  position: sticky;
  top: 0px;
  z-index: 1;
}
</style>
